<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>HTML 超文本标记语言</title>

    <!-- css include -->
    <link rel="stylesheet" type="text/css" href="../../css/materialize.css">
    <link rel="stylesheet" type="text/css" href="../../css/icofont.css">
    <link rel="stylesheet" type="text/css" href="../../css/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../../font/iconfont.css">
	<link rel="icon" href="../../img/logo/icon.png">

    <!-- my css include -->
    <link rel="stylesheet" type="text/css" href="../../css/custom-menu.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
    <link rel="stylesheet" type="text/css" href="../../css/responsive.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</head>


<body>

    <div id="app">
        <div class="thetop"></div>
        <!-- for back to top -->

        <div class='backToTop'>
            <a href="#" class='scroll'>
                <span class="go-up">
                    <i class="icofont icofont-long-arrow-up"></i>
                </span>
            </a>
        </div>
        <!-- backToTop -->

        <!-- ==================== header-section Start ====================-->
        <header id="header-section" class="header-section w100dt navbar-fixed">

            <nav class="nav-extended main-nav">
                <div class="container">
                    <div class="row">
                        <div class="nav-wrapper w100dt">

                            <div class="logo left">
                                <a href="../../index.html" class="brand-logo">
                                    <img src="../../img/logo/logo.png" alt="brand-logo">
                                </a>
                            </div>
                            <!-- logo -->

                            <div>
                                <a data-activates="mobile-demo" class="button-collapse">
                                    <i class="icofont icofont-navigation-menu"></i>
                                </a>
                                <ul id="nav-mobile" class="main-menu center-align hide-on-med-and-down">
                                    <li class=""><a href="../../index.html">主页</a></li>
                                    <li><a href="../../cateogry.html">Html教程</a></li>
                                    <!-- 	<li class="dropdown">
										<a >PAGES <i class="icofont icofont-simple-down"></i></a>
										<ul class="dropdown-container">
											<li><a href="404.html">404 Page</a></li>
										</ul>
									</li> -->
                                    <li><a href="#">Javascript教程</a></li>
                                    <li><a href="#">联系我</a></li>
                                </ul>
                                <!-- /.main-menu -->

                                <!-- ******************** sidebar-menu ******************** -->
                                <ul class="side-nav" id="mobile-demo">
                                    <li class="snavlogo center-align"><img src="../../img/logo/logo.png" alt="logo">
                                    </li>
                                    <li class="active"><a href="../../index.html">主页</a></li>
                                    <li><a href="../../cateogry.html">Html教程</a></li>
                                    <li><a href="#">Javascript教程</a></li>
									<li><a href="#">联系我</a></li>
                                </ul>
                            </div>
                            <!-- main-menu -->

                            <a class="search-trigger right">
                                <i class="icofont icofont-search"></i>
                            </a>
                            <!-- search -->
                            <div id="myNav" class="overlay">
                                <a href="javascript:void(0)" class="closebtn">&times;</a>
                                <div class="overlay-content">
                                    <form>
                                        <input type="text" name="search" placeholder="Search...">
                                        <br>
                                        <button class="waves-effect waves-light" type="submit"
                                            name="action">Search</button>
                                    </form>
                                </div>
                            </div>

                        </div>
                        <!-- /.nav-wrapper -->
                    </div>
                    <!-- row -->
                </div>
                <!-- container -->
            </nav>

        </header>
        <!-- /#header-section -->
        <!-- ==================== header-section End ====================-->





        <!-- ==================== header-section Start ====================-->
        <section id="breadcrumb-section" class="breadcrumb-section w100dt mb-30">
            <div class="container">

                <nav class="breadcrumb-nav w100dt">
                    <div class="page-name hide-on-small-only left">
                        <h4>HTML 超文本标记语言</h4>
                    </div>
                    <div class="nav-wrapper right">
                        <a href="../../index.html" class="breadcrumb">Home</a>
                        <a href="#" class="breadcrumb active">HTML 超文本标记语言</a>
                    </div>
                    <!-- /.nav-wrapper -->
                </nav>
                <!-- /.breadcrumb-nav -->

            </div>
            <!-- container -->
        </section>
        <!-- /.breadcrumb-section -->
        <!-- ==================== header-section End ====================-->

        <!-- ==================== single-blog-section start ====================-->
        <section id="single-blog-section" class="single-blog-section w100dt mb-50">
            <div class="container">
                <div class="row">

                    <div class="col m8 s12">

                        <div class="blogs mb-30">
                            <div class="card">
                                <div class="card-image">
                                    <img src="../../img/banner/banner8.jpg" alt="Image">
                                </div>
                                <!-- /.card-image -->
                                <div class="card-content w100dt">
                                    <p>
                                        <a href="#" class="tag left w100dt l-blue mb-30">html</a>
                                    </p>
                                    <a href="#" class="card-title mb-30">
                                        HTML 超文本标记语言
                                    </a>
                                    <p class="mb-30">
                                        HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML
                                        以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
                                    </p>
                                    <ul class="post-mate-time left mb-30">
                                        <li>
                                            <p class="hero left">
                                                By - <a href="#" class="l-blue">wangzc</a>
                                            </p>
                                        </li>
                                        <li>
                                            <i class="icofont icofont-ui-calendar"></i> 2016/02/03
                                        </li>
                                    </ul>

                                    <ul class="post-mate right mb-30">
                                        <li class="like">
                                            <a href="#">
                                                <i class="icofont icofont-eye"></i>
                                                <span id="busuanzi_container_page_pv">
                                                    本文总阅读量<span id="busuanzi_value_page_pv"></span>次
                                                </span>
                                            </a>
                                        </li>
                                    </ul>

                                    <p class="w100dt mb-10">
                                        “超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
                                    </p>
                                    <p class="w100dt mb-10">
                                        <p>HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 <a
                                                title="HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。"><code>&lt;head&gt;</code></a>，<a
                                                title="HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。"><code>&lt;title&gt;</code></a>，<a
                                                title="HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。"><code>&lt;body&gt;</code></a>，<a
                                                title="HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。"><code>&lt;header&gt;</code></a>，<a
                                                title="HTML <footer> 元素表示最近一个章节内容或者根节点（sectioning root&nbsp;）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。"><code>&lt;footer&gt;</code></a>，<a
                                                title="HTML <article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。​​"><code>&lt;article&gt;</code></a>，<a
                                                title="HTML <section>元素表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。"><code>&lt;section&gt;</code></a>，<a
                                                title="HTML&nbsp;<p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p>&nbsp;是块级元素。"><code>&lt;p&gt;</code></a>，<a
                                                title="HTML <div> 元素 (或&nbsp;HTML 文档分区元素) 是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用&nbsp;class&nbsp;或&nbsp;id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用时才使用&nbsp;(比如 <article> 或&nbsp;<nav>) 。"><code>&lt;div&gt;</code></a>，<a
                                                title="此页面仍未被本地化, 期待您的翻译!"><code>&lt;span&gt;</code></a>，<a
                                                title=""><code>&lt;img&gt;</code></a>，<a
                                                title="HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。"><code>&lt;aside&gt;</code></a>，<a
                                                title="HTML <audio>&nbsp;元素用于在文档中表示音频内容。&nbsp;<audio>&nbsp;元素可以包含多个音频资源， 这些音频资源可以使用&nbsp;src&nbsp;属性或者<source> 元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。"><code>&lt;audio&gt;</code></a>，<a
                                                title="<canvas>元素可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。你可以(也应该)在元素标签内写入可提供替代的的代码内容，这些内容将会在在旧的、不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现。"><code>&lt;canvas&gt;</code></a>，<a
                                                title="HTML <datalist>元素包含了一组<option>元素，这些元素表示其它表单控件可选值."><code>&lt;datalist&gt;</code></a>，<a
                                                title="HTML&nbsp;<details>元素可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。"><code>&lt;details&gt;</code></a>，<a
                                                title="HTML <embed> 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。"><code>&lt;embed&gt;</code></a>，<a
                                                title="HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。"><code>&lt;nav&gt;</code></a>，<a
                                                title="HTML&nbsp;<output>&nbsp;标签表示计算或用户操作的结果。"><code>&lt;output&gt;</code></a>，<a
                                                title="HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式."><code>&lt;progress&gt;</code></a>，<a
                                                title="HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。"><code>&lt;video&gt;</code></a>&nbsp;等等等等。
                                        </p>
                                    </p>

                                    <p class="w100dt mb-10">
                                        <p></p>
                                    </p>
                                    <p class="w100dt mb-10">
                                        <p>HTML 元素通过“标签”（tag）将文本从文档中引出，标签由在“<code>&lt;</code>”和“<code>&gt;</code>”中包裹的元素名组成，HTML 标签里的元素名不区分大小写。也就是说，它们可以用大写，小写或混合形式书写。例如，<code>&lt;title&gt;</code> 标签可以写成 <code>&lt;Title&gt;</code>，<code>&lt;TITLE&gt;</code> 或以任何其他方式。</p>
                                    </p>
                                    <p class="w100dt mb-10">
                                        <p>HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。 例如，键入下面一行内容：</p>
                                    </p>

                                    <blockquote class="grey lighten-2">
                                        我的猫咪脾气爆:)
                                    </blockquote>

                                    <p class="w100dt mb-10">
                                        <p>可以将这行文字封装成一个段落（paragraph）元素来使其在单独一行呈现：</p>
                                    </p>
                                    <blockquote class="grey lighten-2">
                                        <code> &lt;p&gt; 我的猫咪脾气爆:)&lt;/p&gt;</code>
                                    </blockquote>

                                    <p class="w100dt mb-50">
                                     
                                    </p>

                                    <ul class="tag-list left">
                                        <li><a href="#!" class="waves-effect">#html</a></li>
                                    </ul>
                                    <!-- 
									<ul class="share-links right">
										<li><a href="#" class="facebook"><i
													class="icofont icofont-social-facebook"></i></a></li>
										<li><a href="#" class="twitter"><i
													class="icofont icofont-social-twitter"></i></a></li>
										<li><a href="#" class="google-plus"><i
													class="icofont icofont-social-google-plus"></i></a></li>
										<li><a href="#" class="linkedin"><i
													class="icofont icofont-brand-linkedin"></i></a></li>
										<li><a href="#" class="pinterest"><i
													class="icofont icofont-social-pinterest"></i></a></li>
										<li><a href="#" class="instagram"><i
													class="icofont icofont-social-instagram"></i></a></li>
									</ul> -->

                                </div>
                                <!-- /.card-content -->
                            </div>
                            <!-- /.card -->
                        </div>
                        <!-- /.blogs -->

                        <div class="peoples-comments w100dt mb-30">
                            <div class="sidebar-title center-align">
                                <h2>评论</h2>
                            </div>

                            <div class="comment-area w100dt">
                                <div id="gitalk-container"></div>

                            </div>
                            <!-- /.comment-area -->
                        </div>
                        <!-- /.peoples-comments -->

                        <!-- /.leave-comment -->

                    </div>
                    <!-- colm8 -->




                    <div class="col s12 m4 l4">

                        <div class="sidebar-testimonial mb-30">
                            <div class="sidebar-title center-align">
                                <h2>Hi Its Me!</h2>
                            </div>
                            <!-- /.sidebar-title -->

                            <div class="carousel carousel-slider center" data-indicators="true">
                                <div class="carousel-item">
                                    <div class="item-img">
                                        <span></span>
                                    </div>
                                    <h2>王志超</h2>
                                    <small>前端码农</small>
                                    <p>
                                        <span id="busuanzi_container_site_pv">本站总访问量<span
                                            id="busuanzi_value_site_pv"></span>次</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- /.sidebar-testimonial -->



                        <div class="sidebar-followme w100dt mb-30">
                            <div class="sidebar-title center-align">
                                <h2>关注我</h2>
                            </div>
                            <!-- /.sidebar-title -->

                            <ul class="followme-links w100dt">
                                <li class="mrb15">
                                    <a class="facebook" target="_blank" href="https://www.cnblogs.com/wangzhichao/">
                                        <i class="iconfont icon-bokeyuan"></i>
                                        <small class="Followers white-text">354 Likes</small>
                                    </a>
                                </li>
                                <li class="mrb15">
                                    <a class="twitter" target="_blank" href="https://github.com/wzc570738205">
                                        <i class="iconfont icon-git"></i>
                                        <small class="Followers white-text">8 Follows</small>
                                    </a>
                                </li>
                                <li>
                                    <a class="google-plus" target="_blank"
                                        href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501">
                                        <i class="iconfont icon-qq"></i>
                                        <small class="Followers white-text">256 Follows</small>
                                    </a>
                                </li>
                            </ul>

                        </div>
                        <!-- /.sidebar-followme -->





                        <!-- /.featured-posts -->

                        <!-- /.top-post -->


                    </div>
                    <!-- colm4 -->

                </div>
                <!-- row -->
            </div>
            <!-- container -->
        </section>
        <!-- /#single-blog-section -->
        <!-- ==================== single-blog-section end ====================-->





        <!-- ==================== instag leftram-section Start ====================-->
        <section id="instagram-section" class="instagram-section w100dt">

            <div class="instagram-link w100dt">
                <a href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501"
                    target="_blank" rel="noopener noreferrer">
                    <span>你可以在这里找到我</span><br>
                    @wangzc
                </a>
            </div>

        </section>
        <!-- /#instag leftram-section -->
        <!-- ==================== instag leftram-section End ====================-->





        <!-- ==================== footer-section Start ====================-->
        <footer id="footer-section" class="footer-section w100dt">
            <div class="container">

                <div class="footer-logo w100dt center-align mb-30">
                    <a href="#" class="brand-logo">
                        <img src="../../img/logo/logo.png" alt="brand-logo">
                    </a>
                </div>
                <!-- /.footer-logo -->

                <p class="center-align">
                    <i class="icofont icofont-heart-alt l-blue"></i>
                    All Right Reserved, Deasined by
                    <a href="#" class="l-blue">SujonMaji</a>
                </p>

            </div>
            <!-- container -->
        </footer>
        <!-- /#footer-section -->
        <!-- ==================== footer-section End ====================-->

    </div>
</body>

</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="../../js/index.js"></script>
<!-- my custom js -->
<script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../../js/materialize.js"></script>
<script type="text/javascript" src="../../js/owl.carousel.min.js"></script>

<!-- my custom js -->
<script type="text/javascript" src="../../js/custom.js"></script>
<script>
    var gitalk = new Gitalk({
        clientID: 'be18b06eea7b7021c473',
        clientSecret: '346423d34fa36c72577999644da79935a8935032',
        repo: 'wangzc',
        owner: 'wzc570738205',
        admin: ['wzc570738205'],
        id: location.pathname, // Ensure uniqueness and length less than 50
        distractionFreeMode: false // Facebook-like distraction free mode
    })

    gitalk.render('gitalk-container')
</script>